<template>
  <view class="MyToast">
    <view class="toastItem" v-for="(item,index) in list" :key="item.id">
      {{item.content}}
    </view>
  </view>
</template>

<script lang="ts">
interface ListItem {
  id: number;
  content: string;
  timeOut: number;
}
export default {
  name: 'MyToast',
  data(){
    return {
      count: 0,
      list: [] as ListItem[],
    }
  },
  methods:{
    addToast(content: string,showTime = 3000){
      let item:ListItem = {
        id: this.count,
        content,
        timeOut: setTimeout(()=>{
          let number = this.list.findIndex(i=>i.id===item.id);
          if(number>-1){
            this.list.splice(number,1)
          }
          clearTimeout(item.timeOut)
        },showTime)
      }
      this.count++
      this.list.push(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.MyToast{
  position: fixed;
  top: calc(10px + var(--window-top));
  left: 10px;
  z-index: 99999;
  pointer-events: none;
  .toastItem{
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    max-width: 40vw;
    color: white;
    border-radius: 10px;
    margin-bottom: 10px;
    pointer-events: none;
  }
}
</style>